<template>
    <div class="safety">
        <div class="safe-rank">
            <div>
                设置级别:<span class="level-text" :class="levelIcon.class">{{levelIcon.text}}</span>
            </div>
            <div :v-show="!safetyData.isDanger" id="safety-rank-explain">
                还有<span id="not-set-safety-count">{{unSetCount}}</span>项待设置！设置后可获得最佳使用体验！
            </div>
        </div>
        <div class="safety-option">
            <safe-option 
            v-for="item in optionList"
            :key="item.id"
            :img="item.img"
            :optName="item.optName"
            :setedLeftText="item.setedLeftText"
            :setedRightText="item.setedRightText"
            :noSetRightText="item.noSetRightText"
            :noSetLeftText="item.noSetLeftText"
            :isSeted="item.isSeted"
            :setedClass="item.setedClass"
            @click.native="clickOpt(item.id)"
            />
        </div>
        <!-- 关注公众号弹窗 -->
        <att-wechat ref="attWechat" />
        <!-- 帮助绑定微信弹窗 -->
        <bind-wechat-explain 
        :verificationCode="bindWechatHelp.verificationCode"
        :qrcode="bindWechatHelp.qrcode"
        ref="bindWechatExpalin"
        />
    </div>
</template>

<script>
// 自定义组件
import SafeOption from './SafeOption'
import AttWechat from "_components/project/ShowWindow/AttWechat"
import BindWechatExplain from "_components/project/ShowWindow/BindWechatExplain"

// 自定义方法
import { getProImg } from '_projectFn/images'
import { isLoginChose } from '_projectFn/login'
import { enterFirstSetting, enterUserSetLoginPwd, enterUserSetPhone, enterUserSetEmail, enterFollow, enterUserSetPayPwd } from '_projectFn/page'
import { failTextVantToa } from "_projectFn/prompt"
import { getBindWechatInfoHelp } from "_network/request"

// 本地图片
import news from '_assets/img/news-icon.svg' // 微信通知
import loginPassword from '_assets/img/login-password.svg' // 登录密码
import payPassword from '_assets/img/pay-password.svg' // 支付密码
import phone from '_assets/img/phone.svg' // 绑定手机
import emaileAuthentication from '_assets/img/emaile-authentication.svg' // 绑定邮箱
import wechatSafety from '_assets/img/wechat-safety.svg' // 关注微信
import attentionCompany from '_assets/img/attention-company.svg' // 关注企业
import attentionIndustry from '_assets/img/attention-industry.svg' // 关注行业
import attentionProduct from '_assets/img/attention-product.svg' // 关注产品
import attentionExhibition from '_assets/img/association-exhibition-icon.svg' // 关注展会

export default {
    name: 'Safety',
    props: {
        safetyData: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            img: {
                newsIcon: getProImg('_assets/img/news-icon.svg', news), // 微信通知
                loginPasswordIcon: getProImg('_assets/img/login-password.svg', loginPassword), // 登录密码
                payPasswordIcon: getProImg('_assets/img/pay-password.svg', payPassword), // 支付密码
                phoneIcon: getProImg('_assets/img/phone.svg', phone), // 绑定手机
                emaileAuthenticationIcon: getProImg('_assets/img/emaile-authentication.svg', emaileAuthentication), // 绑定邮箱
                wechatSafetyIcon: getProImg('_assets/img/wechat-safety.svg', wechatSafety), // 关注微信
                attentionCompanyIcon: getProImg('_assets/img/attention-company.svg', attentionCompany), // 关注企业
                attentionIndustryIcon: getProImg('_assets/img/attention-industry.svg', attentionIndustry), // 关注行业
                attentionProductIcon: getProImg('_assets/img/attention-product.svg', attentionProduct), // 关注产品
                attentionExhibitionIcon: getProImg('_assets/img/attention-exhibition-icon.svg', attentionExhibition), // 关注展会
            },
            bindWechatHelp: {
                qrcode: '',
                verificationCode: '',
            },
        }
    },
    methods: {
        clickOpt(id) {
            switch (id) {
                case 'news':
                    this.checkNews()
                    break;
                case 'pwd':
                    this.checkPwd()
                    break;
                case 'payPwd':
                    this.checkPayPwd()
                    break;
                case 'phone':
                    this.checkPhone()
                    break;
                case 'email':
                    this.checkEmail()
                    break;
                case 'bindWechat':
                    this.checkBingdWechat()
                    break;
                case 'firm':
                    this.checkFirm()
                    break;
                case 'trade':
                    this.checkTrade()
                    break;
                case 'goods':
                    this.checkGoods()
                    break;
                case 'zh':
                    this.checkZh()
                    break;
                default:
                    this.checkNews()
                    break;
            }
        },
        checkNews() {
            if (this.safetyData.subscribe == 0) { // 显示关注公众号弹窗
                this.$refs.attWechat.showOverlay()
            }
        },
        checkPwd() {
            if (isLoginChose()) {
                if (this.safetyData.phone == 0 && this.safetyData.pwd == 0) {
                    enterFirstSetting()
                } else {
                    enterUserSetLoginPwd(this.safetyData.pwd)
                }
            }
        },
        checkPayPwd() {
            if (isLoginChose()) {
                if (this.safetyData.phone == 0) {
                    failTextVantToa('请先绑定手机')
                } else {
                    enterUserSetPayPwd(this.safetyData.payPwd)
                }
            }
        },
        checkPhone() {
            if (isLoginChose()) {
                enterUserSetPhone(this.safetyData.phone, this.safetyData.phoneNumber)
            }
        },
        checkEmail() {
            enterUserSetEmail()
        },
        // 点击绑定微信
        checkBingdWechat() {
            if (isLoginChose() && this.safetyData.bindWechat == 0) {
                const that = this
                getBindWechatInfoHelp((data) => {
                    if (data) {
                        that.bindWechatHelp.verificationCode = data.Code
                        that.bindWechatHelp.qrcode = data.ScanUrl
                        that.$refs.bindWechatExpalin.showOverlay()
                    }
                })
            }
        },
        // 点击关注企业
        checkFirm() {
            enterFollow('company')
        },
        checkTrade() {
            enterFollow('trade')
        },
        checkGoods() {
            enterFollow('product')
        },
        checkZh() {
            enterFollow('exhibition')
        },
    },
    computed: {
        levelIcon() {
            return {
                text: this.safetyData.isDanger ? '低' : '高',
                class: this.safetyData.isDanger ? 'danger' : ''
            }
        },
        unSetCount() {
            let count = 10
            const safetyData = this.safetyData
            if (safetyData.subscribe == 1) count -= 1
            if (safetyData.pwd == 1) count -= 1
            if (safetyData.payPwd == 1) count -= 1
            if (safetyData.phone == 1) count -= 1
            if (safetyData.email == 1) count -=1
            if (safetyData.bindWechat == 1) count -= 1
            if (safetyData.firm == 1) count -= 1
            if (safetyData.trade == 1) count -= 1
            if (safetyData.goods == 1) count -= 1
            if (safetyData.zh == 1) count -= 1
            return count
        },
        optionList() {
            const safetyData = this.safetyData
            const img = this.img
            return [
                {
                    id: 'news',
                    img: img.newsIcon,
                    optName: '微信通知',
                    setedLeftText: '已开通',
                    setedRightText: '',
                    noSetRightText: '',
                    noSetLeftText: '重要!',
                    isSeted: safetyData.subscribe,
                    setedClass: '',
                },
                {
                    id: 'loginPwd',
                    img: img.loginPasswordIcon,
                    optName: '登录密码',
                    setedLeftText: '已设置',
                    setedRightText: '重置',
                    noSetRightText: '未设置',
                    noSetLeftText: '',
                    isSeted: safetyData.pwd,
                    setedClass: 'default-color',
                },
                {
                    id: 'payPwd',
                    img: img.payPasswordIcon,
                    optName: '支付密码',
                    setedLeftText: '已设置',
                    setedRightText: '重置',
                    noSetRightText: '未设置',
                    noSetLeftText: '',
                    isSeted: safetyData.payPwd,
                    setedClass: 'default-color',
                },
                {
                    id: 'phone',
                    img: img.phoneIcon,
                    optName: '绑定手机',
                    setedLeftText: safetyData.phoneNumber,
                    setedRightText: '重置',
                    noSetRightText: '未绑定',
                    isSeted: safetyData.phone,
                    setedClass: 'default-color',
                },
                {
                    id: 'email',
                    img: img.emaileAuthenticationIcon,
                    optName: '绑定邮箱',
                    setedLeftText: safetyData.emailNumber,
                    setedRightText: '已绑定',
                    noSetRightText: '未绑定',
                    isSeted: safetyData.email,
                    setedClass: 'color-999',
                },
                {
                    id: 'bindWechat',
                    img: img.wechatSafetyIcon,
                    optName: '绑定微信',
                    setedLeftText: safetyData.wechatNo,
                    setedRightText: '已绑定',
                    noSetRightText: '未绑定',
                    isSeted: safetyData.bindWechat,
                    setedClass: 'color-999',
                },
                {
                    id: 'firm',
                    img: img.attentionCompanyIcon,
                    optName: '关注企业',
                    setedLeftText: `(已关注${safetyData.firmCount || 0}个)`,
                    setedRightText: '增加',
                    noSetRightText: '未关注',
                    isSeted: safetyData.firm,
                    setedClass: 'default-color',
                },
                {
                    id: 'trade',
                    img: img.attentionIndustryIcon,
                    optName: '关注行业',
                    setedLeftText: `(已关注${safetyData.tradeCount || 0}个)`,
                    setedRightText: '增加',
                    noSetRightText: '未关注',
                    isSeted: safetyData.trade,
                    setedClass: 'default-color',
                },
                {
                    id: 'goods',
                    img: img.attentionProductIcon,
                    optName: '关注产品',
                    setedLeftText: `(已关注${safetyData.goodsCount || 0}个)`,
                    setedRightText: '增加',
                    noSetRightText: '未关注',
                    isSeted: safetyData.goods,
                    setedClass: 'default-color',
                },
                {
                    id: 'zh',
                    img: img.attentionExhibitionIcon,
                    optName: '关注展会',
                    setedLeftText: `(已关注${safetyData.zhCount || 0}个)`,
                    setedRightText: '增加',
                    noSetRightText: '未关注',
                    isSeted: safetyData.zh,
                    setedClass: 'default-color',
                },
            ]
        }
    },
    components: {
        SafeOption,
        AttWechat,
        BindWechatExplain,
    }
}
</script>

<style lang="scss" scoped>
.safety {
    .safe-rank {
        min-height: 50px;
        display: flex;
        align-items: center;
        padding: 7px 15px;
        background: #f8f8f8;
        flex-wrap: wrap;
        font-size: 16px;
        line-height: 30px;

        .danger {
            color: red;
            font-weight: bold;
        }

        .level-text {
            margin-left: 8px;
        }

        #safety-rank-explain {
            color: #999999;
            width: 100%;
            font-size: 12px;
        }
    }
}
</style>